// 增强UI系统 - Stage 3
import { GameConfig } from '../config/GameConfig.js';

export enum UIState {
    MAIN_MENU = 'main_menu',
    GAME_PLAYING = 'game_playing',
    GAME_PAUSED = 'game_paused',
    SETTINGS = 'settings',
    GAME_OVER = 'game_over',
    VICTORY = 'victory',
    HELP = 'help'
}

export enum ButtonType {
    PRIMARY = 'primary',
    SECONDARY = 'secondary',
    DANGER = 'danger',
    SUCCESS = 'success'
}

interface UIButton {
    id: string;
    text: string;
    x: number;
    y: number;
    width: number;
    height: number;
    type: ButtonType;
    enabled: boolean;
    visible: boolean;
    onClick: () => void;
    hovered: boolean;
}

interface UISlider {
    id: string;
    label: string;
    x: number;
    y: number;
    width: number;
    height: number;
    value: number;
    min: number;
    max: number;
    step: number;
    enabled: boolean;
    visible: boolean;
    onChange: (value: number) => void;
    dragging: boolean;
}

interface UIPanel {
    id: string;
    title: string;
    x: number;
    y: number;
    width: number;
    height: number;
    visible: boolean;
    closable: boolean;
    onClose?: () => void;
}

export class EnhancedUISystem {
    private ctx: CanvasRenderingContext2D;
    private canvas: HTMLCanvasElement;
    private currentState: UIState = UIState.GAME_PLAYING; // 改为直接进入游戏状态
    private buttons: Map<string, UIButton> = new Map();
    private sliders: Map<string, UISlider> = new Map();
    private panels: Map<string, UIPanel> = new Map();
    
    // 事件处理
    private mouseX = 0;
    private mouseY = 0;
    private mouseDown = false;
    private keys: Set<string> = new Set();

    // 游戏状态数据
    private gameStats = {
        score: 0,
        missilesLaunched: 0,
        missilesIntercepted: 0,
        currentWave: 0,
        lives: 3,
        money: 1000,
        timeElapsed: 0
    };

    // 设置数据
    private settings = {
        masterVolume: 0.7,
        sfxVolume: 0.8,
        musicVolume: 0.6,
        difficulty: 1,
        autoSave: true,
        showFPS: true,
        particleQuality: 1.0
    };

    // UI主题
    private theme = {
        primaryColor: '#2196F3',
        secondaryColor: '#757575',
        successColor: '#4CAF50',
        dangerColor: '#F44336',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        textColor: '#FFFFFF',
        accentColor: '#FFC107',
        borderColor: '#666666'
    };

    constructor(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) {
        this.ctx = ctx;
        this.canvas = canvas;
        this.setupEventListeners();
        this.initializeUI();
    }

    private setupEventListeners(): void {
        this.canvas.addEventListener('mousemove', (e) => {
            const rect = this.canvas.getBoundingClientRect();
            this.mouseX = e.clientX - rect.left;
            this.mouseY = e.clientY - rect.top;
            this.handleMouseMove();
        });

        this.canvas.addEventListener('mousedown', (e) => {
            this.mouseDown = true;
            this.handleMouseDown();
        });

        this.canvas.addEventListener('mouseup', (e) => {
            this.mouseDown = false;
            this.handleMouseUp();
        });

        document.addEventListener('keydown', (e) => {
            this.keys.add(e.code);
            this.handleKeyDown(e.code);
        });

        document.addEventListener('keyup', (e) => {
            this.keys.delete(e.code);
        });
    }

    private initializeUI(): void {
        this.createMainMenuUI();
        this.createGameUI();
        this.createSettingsUI();
        this.createGameOverUI();
        console.log('🎨 增强UI系统初始化完成');
    }

    private createMainMenuUI(): void {
        const centerX = this.canvas.width / 2;
        const centerY = this.canvas.height / 2;

        // 开始游戏按钮
        this.addButton('start_game', '开始游戏', centerX - 100, centerY - 100, 200, 50, ButtonType.PRIMARY, () => {
            this.setState(UIState.GAME_PLAYING);
            this.onStartGame?.();
        });

        // 设置按钮
        this.addButton('settings', '设置', centerX - 100, centerY - 30, 200, 50, ButtonType.SECONDARY, () => {
            this.setState(UIState.SETTINGS);
        });

        // 帮助按钮
        this.addButton('help', '帮助', centerX - 100, centerY + 40, 200, 50, ButtonType.SECONDARY, () => {
            this.setState(UIState.HELP);
        });

        // 主菜单面板
        this.addPanel('main_menu_panel', '保卫特拉维夫', centerX - 200, centerY - 200, 400, 350, false);
    }

    private createGameUI(): void {
        // 游戏中的UI元素在渲染时动态显示
    }

    private createSettingsUI(): void {
        const centerX = this.canvas.width / 2;
        const centerY = this.canvas.height / 2;

        // 设置面板
        this.addPanel('settings_panel', '游戏设置', centerX - 250, centerY - 200, 500, 400, true, () => {
            this.setState(UIState.MAIN_MENU);
        });

        // 音量滑块
        this.addSlider('master_volume', '主音量', centerX - 200, centerY - 120, 200, 30, 
            this.settings.masterVolume, 0, 1, 0.1, (value) => {
                this.settings.masterVolume = value;
                this.onSettingsChange?.('masterVolume', value);
            });

        this.addSlider('sfx_volume', '音效音量', centerX - 200, centerY - 70, 200, 30,
            this.settings.sfxVolume, 0, 1, 0.1, (value) => {
                this.settings.sfxVolume = value;
                this.onSettingsChange?.('sfxVolume', value);
            });

        this.addSlider('particle_quality', '粒子质量', centerX - 200, centerY - 20, 200, 30,
            this.settings.particleQuality, 0.1, 2.0, 0.1, (value) => {
                this.settings.particleQuality = value;
                this.onSettingsChange?.('particleQuality', value);
            });

        // 返回按钮
        this.addButton('settings_back', '返回', centerX - 50, centerY + 120, 100, 40, ButtonType.SECONDARY, () => {
            this.setState(UIState.MAIN_MENU);
        });
    }

    private createGameOverUI(): void {
        const centerX = this.canvas.width / 2;
        const centerY = this.canvas.height / 2;

        // 游戏结束面板
        this.addPanel('game_over_panel', '游戏结束', centerX - 200, centerY - 150, 400, 300, false);

        // 重新开始按钮
        this.addButton('restart_game', '重新开始', centerX - 100, centerY + 50, 200, 50, ButtonType.PRIMARY, () => {
            this.setState(UIState.GAME_PLAYING);
            this.onRestartGame?.();
        });

        // 返回菜单按钮
        this.addButton('back_to_menu', '返回主菜单', centerX - 100, centerY + 110, 200, 50, ButtonType.SECONDARY, () => {
            this.setState(UIState.MAIN_MENU);
        });
    }

    private addButton(id: string, text: string, x: number, y: number, width: number, height: number, 
                     type: ButtonType, onClick: () => void): void {
        this.buttons.set(id, {
            id, text, x, y, width, height, type,
            enabled: true,
            visible: false,
            onClick,
            hovered: false
        });
    }

    private addSlider(id: string, label: string, x: number, y: number, width: number, height: number,
                     value: number, min: number, max: number, step: number, onChange: (value: number) => void): void {
        this.sliders.set(id, {
            id, label, x, y, width, height, value, min, max, step,
            enabled: true,
            visible: false,
            onChange,
            dragging: false
        });
    }

    private addPanel(id: string, title: string, x: number, y: number, width: number, height: number,
                    closable: boolean, onClose?: () => void): void {
        this.panels.set(id, {
            id, title, x, y, width, height,
            visible: false,
            closable,
            onClose
        });
    }

    public setState(state: UIState): void {
        this.currentState = state;
        this.updateUIVisibility();
    }

    private updateUIVisibility(): void {
        // 隐藏所有UI元素
        for (const button of this.buttons.values()) {
            button.visible = false;
        }
        for (const slider of this.sliders.values()) {
            slider.visible = false;
        }
        for (const panel of this.panels.values()) {
            panel.visible = false;
        }

        // 根据当前状态显示相应的UI元素
        switch (this.currentState) {
            case UIState.MAIN_MENU:
                this.setElementsVisible(['start_game', 'settings', 'help', 'main_menu_panel']);
                break;
            case UIState.SETTINGS:
                this.setElementsVisible(['settings_panel', 'master_volume', 'sfx_volume', 'particle_quality', 'settings_back']);
                break;
            case UIState.GAME_OVER:
                this.setElementsVisible(['game_over_panel', 'restart_game', 'back_to_menu']);
                break;
            case UIState.VICTORY:
                this.setElementsVisible(['game_over_panel', 'restart_game', 'back_to_menu']);
                break;
        }
    }

    private setElementsVisible(elementIds: string[]): void {
        for (const id of elementIds) {
            const button = this.buttons.get(id);
            const slider = this.sliders.get(id);
            const panel = this.panels.get(id);
            
            if (button) button.visible = true;
            if (slider) slider.visible = true;
            if (panel) panel.visible = true;
        }
    }

    public render(): void {
        this.ctx.save();

        switch (this.currentState) {
            case UIState.MAIN_MENU:
                this.renderMainMenu();
                break;
            case UIState.GAME_PLAYING:
                this.renderGameUI();
                break;
            case UIState.GAME_PAUSED:
                this.renderGameUI();
                this.renderPauseOverlay();
                break;
            case UIState.SETTINGS:
                this.renderSettings();
                break;
            case UIState.GAME_OVER:
            case UIState.VICTORY:
                this.renderGameOver();
                break;
            case UIState.HELP:
                this.renderHelp();
                break;
        }

        this.ctx.restore();
    }

    private renderMainMenu(): void {
        // 背景
        this.ctx.fillStyle = 'rgba(0, 20, 40, 0.9)';
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

        // 渲染面板和按钮
        this.renderPanels();
        this.renderButtons();

        // 游戏标题
        this.ctx.fillStyle = this.theme.accentColor;
        this.ctx.font = 'bold 48px "Microsoft YaHei", sans-serif';
        this.ctx.textAlign = 'center';
        this.ctx.fillText('保卫特拉维夫', this.canvas.width / 2, 150);

        // 副标题
        this.ctx.fillStyle = this.theme.textColor;
        this.ctx.font = '18px "Microsoft YaHei", sans-serif';
        this.ctx.fillText('Iron Dome Defense System', this.canvas.width / 2, 180);
    }

    private renderGameUI(): void {
        // 简洁的顶部信息栏 - 替代原来的浮动面板
        this.renderTopInfoBar();
    }

    private renderSettings(): void {
        // 半透明背景
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

        this.renderPanels();
        this.renderSliders();
        this.renderButtons();
    }

    private renderGameOver(): void {
        // 半透明背景
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

        this.renderPanels();
        this.renderButtons();

        // 游戏结果
        const centerX = this.canvas.width / 2;
        const centerY = this.canvas.height / 2;

        this.ctx.fillStyle = this.currentState === UIState.VICTORY ? this.theme.successColor : this.theme.dangerColor;
        this.ctx.font = 'bold 36px "Microsoft YaHei", sans-serif';
        this.ctx.textAlign = 'center';
        this.ctx.fillText(this.currentState === UIState.VICTORY ? '胜利！' : '失败！', centerX, centerY - 50);

        // 最终分数
        this.ctx.fillStyle = this.theme.textColor;
        this.ctx.font = '18px "Microsoft YaHei", sans-serif';
        this.ctx.fillText(`最终分数: ${this.gameStats.score}`, centerX, centerY - 10);
        this.ctx.fillText(`拦截率: ${Math.round(this.gameStats.missilesIntercepted / Math.max(1, this.gameStats.missilesLaunched) * 100)}%`, centerX, centerY + 15);
    }

    private renderHelp(): void {
        // 半透明背景
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

        const centerX = this.canvas.width / 2;
        const startY = 100;

        this.ctx.fillStyle = this.theme.textColor;
        this.ctx.font = 'bold 24px "Microsoft YaHei", sans-serif';
        this.ctx.textAlign = 'center';
        this.ctx.fillText('游戏帮助', centerX, startY);

        this.ctx.font = '16px "Microsoft YaHei", sans-serif';
        this.ctx.textAlign = 'left';

        const helpText = [
            '游戏目标：',
            '• 保护以色列城市免受导弹攻击',
            '• 使用铁穹防御系统拦截来袭导弹',
            '',
            '操作说明：',
            '• T键：发射测试导弹',
            '• W键：启动第1波攻击',
            '• Q键：启动第2波攻击',
            '• A键：切换自动攻击',
            '• R键：重置游戏',
            '• D键：切换调试模式',
            '• I键：强制拦截弹测试',
            '• L键：列出所有拦截弹信息',
            '• X键：防御系统诊断',
            '• ESC键：暂停游戏',
            '',
            '防御系统：',
            '• 铁穹：拦截短程导弹',
            '• 箭式：拦截中程导弹',
            '• 大卫投石索：拦截远程导弹'
        ];

        let y = startY + 50;
        for (const line of helpText) {
            this.ctx.fillText(line, centerX - 300, y);
            y += 25;
        }

        // 返回按钮
        this.renderButton({
            id: 'help_back',
            text: '返回',
            x: centerX - 50,
            y: y + 30,
            width: 100,
            height: 40,
            type: ButtonType.SECONDARY,
            enabled: true,
            visible: true,
            onClick: () => this.setState(UIState.MAIN_MENU),
            hovered: false
        });
    }

    private renderPanels(): void {
        for (const panel of this.panels.values()) {
            if (panel.visible) {
                this.renderPanel(panel.x, panel.y, panel.width, panel.height, panel.title, panel.closable);
            }
        }
    }

    private renderPanel(x: number, y: number, width: number, height: number, title: string, closable: boolean = false): void {
        // 面板背景
        this.ctx.fillStyle = this.theme.backgroundColor;
        this.ctx.fillRect(x, y, width, height);

        // 面板边框
        this.ctx.strokeStyle = this.theme.borderColor;
        this.ctx.lineWidth = 2;
        this.ctx.strokeRect(x, y, width, height);

        // 标题栏
        this.ctx.fillStyle = this.theme.primaryColor;
        this.ctx.fillRect(x, y, width, 30);

        // 标题文字
        this.ctx.fillStyle = this.theme.textColor;
        this.ctx.font = 'bold 14px "Microsoft YaHei", sans-serif';
        this.ctx.textAlign = 'left';
        this.ctx.fillText(title, x + 10, y + 20);

        // 关闭按钮
        if (closable) {
            const closeX = x + width - 25;
            const closeY = y + 5;
            this.ctx.fillStyle = this.theme.dangerColor;
            this.ctx.fillRect(closeX, closeY, 20, 20);
            this.ctx.fillStyle = this.theme.textColor;
            this.ctx.textAlign = 'center';
            this.ctx.fillText('×', closeX + 10, closeY + 15);
        }
    }

    private renderButtons(): void {
        for (const button of this.buttons.values()) {
            if (button.visible) {
                this.renderButton(button);
            }
        }
    }

    private renderButton(button: UIButton): void {
        // 按钮背景
        let bgColor = this.theme.primaryColor;
        switch (button.type) {
            case ButtonType.SECONDARY:
                bgColor = this.theme.secondaryColor;
                break;
            case ButtonType.DANGER:
                bgColor = this.theme.dangerColor;
                break;
            case ButtonType.SUCCESS:
                bgColor = this.theme.successColor;
                break;
        }

        if (button.hovered) {
            bgColor = this.adjustBrightness(bgColor, 1.2);
        }

        if (!button.enabled) {
            bgColor = this.adjustBrightness(bgColor, 0.5);
        }

        this.ctx.fillStyle = bgColor;
        this.ctx.fillRect(button.x, button.y, button.width, button.height);

        // 按钮边框
        this.ctx.strokeStyle = this.theme.borderColor;
        this.ctx.lineWidth = 1;
        this.ctx.strokeRect(button.x, button.y, button.width, button.height);

        // 按钮文字
        this.ctx.fillStyle = this.theme.textColor;
        this.ctx.font = '16px "Microsoft YaHei", sans-serif';
        this.ctx.textAlign = 'center';
        this.ctx.fillText(button.text, button.x + button.width / 2, button.y + button.height / 2 + 6);
    }

    private renderSliders(): void {
        for (const slider of this.sliders.values()) {
            if (slider.visible) {
                this.renderSlider(slider);
            }
        }
    }

    private renderSlider(slider: UISlider): void {
        // 标签
        this.ctx.fillStyle = this.theme.textColor;
        this.ctx.font = '14px "Microsoft YaHei", sans-serif';
        this.ctx.textAlign = 'left';
        this.ctx.fillText(slider.label, slider.x, slider.y - 5);

        // 滑块轨道
        this.ctx.fillStyle = this.theme.secondaryColor;
        this.ctx.fillRect(slider.x, slider.y + 10, slider.width, 4);

        // 滑块手柄
        const handleX = slider.x + (slider.value - slider.min) / (slider.max - slider.min) * slider.width;
        this.ctx.fillStyle = this.theme.primaryColor;
        this.ctx.fillRect(handleX - 8, slider.y + 2, 16, 20);

        // 数值显示
        this.ctx.fillStyle = this.theme.textColor;
        this.ctx.textAlign = 'right';
        this.ctx.fillText(slider.value.toFixed(1), slider.x + slider.width + 30, slider.y + 16);
    }

    private renderControlsHint(): void {
        // 移除浮动控制提示面板 - 控制说明已整合到游戏帮助中
        // 用户可通过按 'H' 键或游戏菜单访问完整的控制说明
    }

    private adjustBrightness(color: string, factor: number): string {
        const hex = color.replace('#', '');
        const r = Math.min(255, Math.floor(parseInt(hex.substr(0, 2), 16) * factor));
        const g = Math.min(255, Math.floor(parseInt(hex.substr(2, 2), 16) * factor));
        const b = Math.min(255, Math.floor(parseInt(hex.substr(4, 2), 16) * factor));
        return `rgb(${r}, ${g}, ${b})`;
    }

    // 事件处理
    private handleMouseMove(): void {
        // 在游戏进行状态时，仍然需要处理悬停状态，但不阻止其他事件
        // 更新按钮悬停状态
        for (const button of this.buttons.values()) {
            if (button.visible) {
                button.hovered = this.isPointInRect(this.mouseX, this.mouseY, button.x, button.y, button.width, button.height);
            }
        }
    }

    private handleMouseDown(): void {
        // 在游戏进行状态时，不处理Canvas上的鼠标事件，让HTML UI元素正常工作
        if (this.currentState === UIState.GAME_PLAYING) {
            return;
        }

        // 检查按钮点击
        for (const button of this.buttons.values()) {
            if (button.visible && button.enabled && button.hovered) {
                button.onClick();
                return;
            }
        }

        // 检查滑块拖拽
        for (const slider of this.sliders.values()) {
            if (slider.visible && slider.enabled) {
                const handleX = slider.x + (slider.value - slider.min) / (slider.max - slider.min) * slider.width;
                if (this.isPointInRect(this.mouseX, this.mouseY, handleX - 8, slider.y + 2, 16, 20)) {
                    slider.dragging = true;
                    return;
                }
            }
        }
    }

    private handleMouseUp(): void {
        // 在游戏进行状态时，不处理Canvas上的鼠标事件，让HTML UI元素正常工作
        if (this.currentState === UIState.GAME_PLAYING) {
            return;
        }

        // 停止所有滑块拖拽
        for (const slider of this.sliders.values()) {
            slider.dragging = false;
        }
    }

    private handleKeyDown(code: string): void {
        if (code === 'Escape') {
            if (this.currentState === UIState.GAME_PLAYING) {
                this.setState(UIState.GAME_PAUSED);
            } else if (this.currentState === UIState.GAME_PAUSED) {
                this.setState(UIState.GAME_PLAYING);
            }
        }
    }

    private isPointInRect(x: number, y: number, rectX: number, rectY: number, width: number, height: number): boolean {
        return x >= rectX && x <= rectX + width && y >= rectY && y <= rectY + height;
    }

    public update(deltaTime: number): void {
        this.gameStats.timeElapsed += deltaTime;

        // 更新滑块拖拽
        for (const slider of this.sliders.values()) {
            if (slider.dragging) {
                const relativeX = this.mouseX - slider.x;
                const ratio = Math.max(0, Math.min(1, relativeX / slider.width));
                const newValue = slider.min + ratio * (slider.max - slider.min);
                const steppedValue = Math.round(newValue / slider.step) * slider.step;
                
                if (steppedValue !== slider.value) {
                    slider.value = steppedValue;
                    slider.onChange(steppedValue);
                }
            }
        }
    }

    // 公共方法
    public updateGameStats(stats: Partial<typeof this.gameStats>): void {
        Object.assign(this.gameStats, stats);
    }

    public getCurrentState(): UIState {
        return this.currentState;
    }

    public getSettings(): typeof this.settings {
        return { ...this.settings };
    }

    // 事件回调
    public onStartGame?: () => void;
    public onRestartGame?: () => void;
    public onSettingsChange?: (key: string, value: any) => void;

    private renderPauseOverlay(): void {
        // 半透明覆盖层
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

        // 暂停文字
        this.ctx.fillStyle = this.theme.textColor;
        this.ctx.font = 'bold 48px "Microsoft YaHei", sans-serif';
        this.ctx.textAlign = 'center';
        this.ctx.fillText('游戏暂停', this.canvas.width / 2, this.canvas.height / 2);

        // 提示文字
        this.ctx.font = '18px "Microsoft YaHei", sans-serif';
        this.ctx.fillText('按 ESC 继续游戏', this.canvas.width / 2, this.canvas.height / 2 + 50);
    }

    private renderTopInfoBar(): void {
        // 绘制简洁的顶部信息栏
        const barHeight = 40;
        const padding = 10;
        
        // 半透明背景
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        this.ctx.fillRect(0, 0, this.canvas.width, barHeight);
        
        // 分隔线
        this.ctx.strokeStyle = this.theme.accentColor;
        this.ctx.lineWidth = 1;
        this.ctx.beginPath();
        this.ctx.moveTo(0, barHeight);
        this.ctx.lineTo(this.canvas.width, barHeight);
        this.ctx.stroke();
        
        // 设置文本样式
        this.ctx.fillStyle = this.theme.textColor;
        this.ctx.font = 'bold 14px "Microsoft YaHei", sans-serif';
        this.ctx.textAlign = 'left';
        
        // 左侧：游戏状态信息
        const leftStartX = padding;
        let currentX = leftStartX;
        
        // 波次信息
        const waveText = `波次: ${this.gameStats.currentWave}`;
        this.ctx.fillText(waveText, currentX, 25);
        currentX += this.ctx.measureText(waveText).width + 30;
        
        // 生命值
        this.ctx.fillStyle = this.gameStats.lives > 2 ? '#28a745' : this.gameStats.lives > 1 ? '#ffc107' : '#dc3545';
        const livesText = `生命: ${this.gameStats.lives}`;
        this.ctx.fillText(livesText, currentX, 25);
        currentX += this.ctx.measureText(livesText).width + 30;
        
        // 资金
        this.ctx.fillStyle = this.theme.textColor;
        const moneyText = `资金: $${this.gameStats.money}`;
        this.ctx.fillText(moneyText, currentX, 25);
        currentX += this.ctx.measureText(moneyText).width + 30;
        
        // 中间：拦截统计
        const centerX = this.canvas.width / 2;
        this.ctx.textAlign = 'center';
        
        const interceptRate = this.gameStats.missilesLaunched > 0 ? 
            Math.round((this.gameStats.missilesIntercepted / this.gameStats.missilesLaunched) * 100) : 0;
        
        this.ctx.fillStyle = interceptRate >= 80 ? '#28a745' : interceptRate >= 60 ? '#ffc107' : '#dc3545';
        const interceptText = `拦截率: ${interceptRate}% (${this.gameStats.missilesIntercepted}/${this.gameStats.missilesLaunched})`;
        this.ctx.fillText(interceptText, centerX, 25);
        
        // 右侧：时间和分数
        this.ctx.textAlign = 'right';
        this.ctx.fillStyle = this.theme.textColor;
        
        const rightEndX = this.canvas.width - padding;
        let rightX = rightEndX;
        
        // 分数
        const scoreText = `分数: ${this.gameStats.score}`;
        this.ctx.fillText(scoreText, rightX, 25);
        rightX -= this.ctx.measureText(scoreText).width + 30;
        
        // 时间
        const minutes = Math.floor(this.gameStats.timeElapsed / 60000);
        const seconds = Math.floor((this.gameStats.timeElapsed % 60000) / 1000);
        const timeText = `${minutes}:${seconds.toString().padStart(2, '0')}`;
        this.ctx.fillText(timeText, rightX, 25);
    }
}
